<template>
  <div style="padding: 8px;">
  <div class="line1">
    <template v-for="item in line1List">
      <div class="line1Item" :style="{'background-color': item.bgColor}">
        <div class="value">{{item.value}}</div>
        <div class="title">{{item.title}}</div>
        <div class="href">
          <a class="link" href="javascript:void(0)" @click="itemNext(item.href)">{{$t('home.enter')}}<i class="el-icon-right"></i></a>
        </div>
      </div>
    </template>
  </div>
  <div class="line2">
    <div id="homeChart" class="homeChart"></div>
    <div class="homeInfo">
      <div class="myHeader"><i class="el-icon-tickets"></i><span>{{$t('home.pending')}}</span></div>
      <div></div>
    </div>
  </div>
</div>
</template>

<script>

  import myChart from 'echarts'
  import {homeLine1} from '@/api/home/index'

  export default {
    name: "Home",
    mounted() {
      homeLine1().then(data => {
        this.line1List = data;
      });
      this.initHomeChart();
    },
    methods: {
      async itemNext(path) {
        await this.$router.push({path: path});
      },
      initHomeChart() {
        this.chart = myChart.init(document.getElementById('homeChart'));
        let _this = this;
        window.onresize = function () {
          _this.chart.resize();
        }
        this.chart.setOption({
          xAxis: {
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            boundaryGap: false
          },
          grid: {
            left: 10,
            right: 10,
            bottom: 20,
            containLabel: true
          },

          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          yAxis: {},
          series: [{
            name: 'visitors',
            itemStyle: {
              normal: {
                areaStyle: {}
              }
            },
            smooth: true,
            type: 'line',
            data: [100, 120, 161, 134, 105, 160, 165],
            animationDuration: 2600,
            animationEasing: 'cubicInOut'
          },{
              name: 'buyers',
              smooth: true,
              type: 'line',
              itemStyle: {
                normal: {
                  color: 'rgba(2, 197, 233, 0.2)',
                  lineStyle: {
                    color: 'rgba(2, 197, 233, 0.2)'
                  },
                  areaStyle: {
                    color: 'rgba(99,194,255, 0.6)'
                  }
                }
              },
              data: [120, 82, 91, 154, 162, 140, 130],
              animationDuration: 2000,
              animationEasing: 'quadraticOut'
            }]
        })
      }
    },
    data() {
      return {
        line1List: [],
        chart: undefined
      }
    }
  }
</script>

<style scoped>
  .line1 {
    display: flex;
  }

  .line1Item {
    width: 20%;
    margin: 5px;
    height: 120px;
    border-radius: 5px;
    color: #FFFFFF;
    padding: 10px;
    font-size: 14px;
    position: relative;
  }

  .line1Item .value {
    font-size: 25px;
    font-weight: bold;
  }

  .line1Item .href {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    line-height: 34px;
    height: 35px;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 0 0 5px 5px;
    text-align: center;
  }

  .line1Item .href .link {
    color: #DDDDDD;
    display: inline-block;
    width: 100%;
    text-decoration: none;
  }

  .line1Item .href .link:hover {
    color: #FFFFFF;
  }

  .line2 {
    display: flex;
    height: 300px;
  }

  .homeChart {
    width: 60%;
    height: 100%;
    margin: 5px;
    border: 1px solid #999999;
    border-radius: 5px;
  }

  .homeInfo {
    width: 40%;
    height: 100%;
    margin: 5px;
    border-radius: 5px;
    background-color: #549cc6;
  }

  .myHeader {
    padding: 5px;
    font-size: 14px;
    font-weight: bold;
    color: #FFFFFF;
    border-bottom: 1px solid #cccccc;
  }

  .myHeader span{
    margin-left: 3px;
  }
</style>
